<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料名称：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="skuName" class="layui-input" type="text" placeholder="请输入物料名称" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编码：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="materialSkuCode" class="layui-input" type="text" placeholder="请输入物料名称" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">规格码：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="oldSpecCode" class="layui-input" type="text" placeholder="请输入物料名称" autocomplete="off"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit>查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                    <button id="unstartedMaterialsExport" class="layui-btn icon-btn color-green"><i class="layui-icon">&#xe67d;</i>导出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--未开工物料需求统计-->
            <div class="work-materials-box">
                <div class="card-box">
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">未开工物料规格数</div>
                            <div class="val"><p id="num"></p><span>个</span></div>
                        </div>
                    </div>
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">未开工物料总计金额</div>
                            <div class="val"><span>￥</span><p id="total"></p></div>
                        </div>
                    </div>
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">缺货物料数</div>
                            <div class="val"><p id="outNum"></p><span>个</span></div>
                        </div>
                    </div>
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">缺货物料金额</div>
                            <div class="val"><span>￥</span><p id="outTotal"></p></div>
                        </div>
                    </div>
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">未开工物料涉及供应商</div>
                            <div class="val"><p id="supplier"></p><span>家</span></div>
                        </div>
                    </div>
                    <div class="card-cell">
                        <div class="card-item">
                            <div class="title">缺货物料及供应商</div>
                            <div class="val"><p id="outSupplier"></p><span>个</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="unstartedMaterialsTable" lay-filter="unstartedMaterialsTable"></table>
        </div>
    </div>
</div>

<style>
    .work-materials-box{
        padding-top: 15px;
    }
    .work-materials-box .card-box{
        display: flex;
        margin: 0 -10px;
    }
    .work-materials-box .card-box .card-cell{
        padding: 0 10px;
        flex: 1;
    }
    .work-materials-box .card-box .card-cell .card-item{
        padding: 15px 15px;
        background-color: #F8F8F8;
        border-radius: 5px;
        transition: all 1000ms;
    }
    .work-materials-box .card-box .card-cell .card-item .title{
        line-height: 24px;
        font-size: 12px;
        padding-bottom: 10px;
    }
    .work-materials-box .card-box .card-cell .card-item .title{
        color: #999;
    }
    .work-materials-box .card-box .card-cell .card-item .val{
        font-size: 30px;
        color: #169F1D;
        display: flex;
        align-items: center;
    }
    .work-materials-box .card-box .card-cell .val span{
        font-size: 22px;
    }
    .layui-form.simpleWorkOrderFormBox {
        padding: 20px;
        box-sizing: border-box;
        height: 100%
    }

    .simpleWorkOrderFormBox .open-details-box {
        height: calc(100% - 60px);
        overflow: auto;
        padding-bottom: 20px;
    }

    .simpleWorkOrderFormBox .layui-form-item > .layui-inline {
        margin-right: 0;
    }

    .simpleWorkOrderFormBox .layui-form-item > .layui-inline label {
        min-width: 70px;
        width: auto;
        padding: 9px;
    }

    /*.borderNone .layui-input-inline:not(.borderShow) input[readonly]:not(.layui-unselect),
    .borderNone .layui-input-inline:not(.borderShow) input[readonly]:not(.layui-unselect):hover,
    .borderNone .layui-input-inline:not(.borderShow) input[readonly]:not(.layui-unselect):focus,
    div[lay-id="productionWorkOrderAddDeviceTable"] input[readonly],
    div[lay-id="productionWorkOrderAddDeviceTable"] input[readonly]:hover,
    div[lay-id="productionWorkOrderAddDeviceTable"] input[readonly]:focus {
        border-color: transparent !important;
        outline-color: transparent;
    }*/

    div[lay-id="selectProductDetailTable"] .layui-table-cell,
    div[lay-id="productionWorkOrderAddMaterialTable"] .layui-table-cell {
        height: auto;
        max-height: 80px;
    }

    div[lay-id="selectProductDetailTable"] .layui-table-cell img,
    div[lay-id="productionWorkOrderAddMaterialTable"] .layui-table-cell img {
        max-height: 80px;
    }

    div[lay-id="equipmentTable"] .layui-table-header,
    div[lay-id="materialTable"] .layui-table-header{
        border-width: 1px 0 0 1px;
    }

    .importButton {
        position: relative;
        overflow: hidden;
    }

    .import {
        opacity: 0;
        width: 64px;
        height: 32px;
        left: 0;
        top: 0;
        position: absolute;
        cursor: pointer;
    }

    .simpleWorkOrderFormBoxHeader {
        display: flex;
    }

    .simpleWorkOrderFormBoxHeader > div {
        flex: 1;
    }

    .simpleWorkOrderFormMain {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        border: 1px solid #ECECEC;
        box-sizing: border-box;
    }

    .process {
        flex: 1;
        height: 100%;
        background: #F7F8FA;
        border-right: 1px solid #ECECEC;
    }

    .processHeader {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .processHeaderTitle,
    .equipmentHeaderTitle,
    .materialHeaderTitle {
        width: 70px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
    }

    .processHeaderBtn > a {
        border: 1px solid #009C5E;
        color: #009C5E;
    }

    .processBox {
        width: 100%;
        height: calc(100% - 79px);
        overflow-y: auto;
    }

    .processBox::-webkit-scrollbar {
        width: 5px;
    }

    .processBoxItem {
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-top: 1px solid transparent;
        cursor: pointer;
        transition: all 300ms;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }

    .processBoxItem:hover {
        background-color: #fff;
    }

    .processBoxItem.active {
        background-color: #fff;
        position: relative;
        border-top: 1px solid #ECECEC;
    }

    .processBoxItem.active:before {
        content: "";
        position: absolute;
        display: block;
        width: 4px;
        height: 50px;
        background: #009C5E;
        left: 0;
        top: 5px;
    }

    .processBoxName {
        flex: 1;
    }

    .processBoxItem.active .processBoxName {
        font-weight: bold;
        color: #333333;
    }

    .equipment {
        border-right: 1px solid #ECECEC;
    }

    .equipmentHeader, .materialHeader {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 38px;
        padding-right: 8px;
        margin-bottom: 10px;
    }

    .equipmentHeaderBtn > a,
    .materialHeaderBtn > a {
        color: #fff;
    }

    .equipment, .material {
        flex: 2;
        height: 100%;
        overflow-y: scroll;
        padding: 20px 0 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .equipmentBox, .materialBox {
        flex: 1;
        overflow-y: scroll;
    }

    .processTemplateForm {
        padding: 0 20px 20px;
        box-sizing: border-box;
        height: 100%
    }

    .processTemplateForm .open-details-box {
        height: calc(100% - 40px);
        overflow-y: scroll;
        /*padding-bottom: 20px;*/
    }

    .processTemplateForm .layui-table-body {
        overflow-x: hidden;
    }

    .processTemplateForm div.layui-disabled:hover,
    .selectWorkProcessDeviceTemplate div.layui-disabled:hover,
    .selectWorkProcessMaterialTemplate div.layui-disabled:hover {
        cursor: pointer !important;
    }

    div.layui-table-view[lay-id="equipmentTable"] .layui-table th,
    div.layui-table-view[lay-id="equipmentTable"] .layui-table td,
    div.layui-table-view[lay-id="materialTable"] .layui-table th,
    div.layui-table-view[lay-id="materialTable"] .layui-table td {
        padding: 5px 0;
    }

    div.layui-table-view[lay-id="equipmentTable"] .layui-table-cell,
    div.layui-table-view[lay-id="materialTable"] .layui-table-cell {
        padding: 0 5px;
    }

    .materialBoxTable .layui-table, .equipmentBoxTable .layui-table {
        margin: 0;
    }

    .skuCodeSelectBox {
        width: 100%;
        background-color: #F7F8FA;
        margin-top: 5px;
        box-sizing: border-box;
        position: absolute;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        border-radius: 5px;
        z-index: 9999;
        display: none;
        max-height: 380px;
        height: auto;
        transition: all 300ms;
    }

    .skuCodeSelectBoxList {
        line-height: 2em;
        cursor: pointer;
        padding: 5px 10px;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        transition: all 500ms;
        color: #000;
        background-color: #F7F8FA;
    }

    .skuCodeSelectBoxList:hover {
        background-color: #00833D;
        color: #fff;
    }
</style>

<!-- 表格操作列 -->
<script type="text/html" id="unstartedMaterialsTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
</script>
<!--工单表格操作列-->
<script type="text/html" id="workOrderPlanTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="materialsDetailTemplate">
    <form lay-filter="materialsDetailTemplate" class="layui-form form-scroll">
        <div class="open-details-box" style="padding: 0 20px;">
            <div class="layui-form-item">
                <table class="layui-table" id="unstartedMaterialsDetailTable" lay-filter="unstartedMaterialsDetailTable"></table>
            </div>
            <div class="layui-form-item">
                <table class="layui-table" id="workOrderPlanTable" lay-filter="workOrderPlanTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right" style="padding: 0 20px;">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<script type="text/html" id="simpleWorkOrderForm">
    <form lay-filter="simpleWorkOrderForm" class="layui-form model-form simpleWorkOrderFormBox">
        <div class="open-details-box borderNone">
            <div class="layui-form-item simpleWorkOrderFormBoxHeader">
                <input name="id" type="hidden"/>
                <div class="layui-inline" id="workPlanCodeBox" style="display: none">
                    <label class="layui-form-label">生产计划编号</label>
                    <div class="layui-input-inline">
                        <input name="workPlanCode" class="layui-input" type="text" readonly="readonly"
                               placeholder="生产计划编号"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">工单编号</label>
                    <div class="layui-input-inline">
                        <input name="code" class="layui-input" type="text" lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">生产产品编号</label>
                    <div class="layui-input-inline">
                        <input name="skuCode" class="layui-input" type="text" autocomplete="off"/>
                        <div class="skuCodeSelectBox" id="skuCodeSelectBox"></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">生产数量</label>
                    <div class="layui-input-inline">
                        <input name="productionQuantity" class="layui-input" type="text"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">备注描述</label>
                    <div class="layui-input-inline">
                        <input name="remark" class="layui-input" type="text"/>
                    </div>
                </div>
            </div>
            <div class="simpleWorkOrderFormMain">
                <div class="process">
                    <div class="processHeader">
                        <div class="processHeaderTitle">选择工序</div>
                        <div class="processHeaderBtn" id="processHeaderBtn">
                            <a class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-addition"></i>添加工序
                            </a>
                        </div>
                    </div>
                    <div class="processBox">
                        <ul id="processBoxList">

                        </ul>
                    </div>
                </div>
                <div class="equipment">
                    <div class="equipmentHeader">
                        <div class="equipmentHeaderTitle">关联设备</div>
                        <div class="equipmentHeaderBtn" id="equipmentHeaderBtn">
                            <a class="layui-btn"><i class="layui-icon layui-icon-addition"></i>添加设备</a>
                        </div>
                    </div>
                    <div class="equipmentBox">
                        <div class="equipmentBoxTable">
                            <table class="layui-table" id="equipmentTable" lay-filter="equipmentTable"></table>
                        </div>
                    </div>
                </div>
                <div class="material">
                    <div class="materialHeader">
                        <div class="materialHeaderTitle">关联物料</div>
                        <div class="materialHeaderBtn" id="materialHeaderBtn">
                            <a class="layui-btn"><i class="layui-icon layui-icon-addition"></i>添加物料</a>
                        </div>
                    </div>
                    <div class="materialBox">
                        <div class="materialBoxTable">
                            <table class="layui-table" id="materialTable" lay-filter="materialTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <div class="left-btn"></div>
            <div class="right-btn">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                <button class="layui-btn" lay-filter="productionWorkPlanFormSubmit" lay-submit type="button">提交</button>
            </div>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        var insTb = table.render({
            elem: '#unstartedMaterialsTable',
            url: config.base + 'production/productionPlan/admin/unstartedMaterials/list',
            page: true,
            limit: 5,
            limits:[5,10,20,30,40,50,60,70,80],
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                ,{field: 'pic', fixed: 'left', width: 110, title: '图片',templet:function (d) {
                    if(d.pic){
                        return '<img src="'+ d.pic +'" style="height: 80px;width: 80px;"/>';
                    }
                    return '<img src="assets/images/default-icon.png"/>';
                }}
                ,{field: 'skuName',title: '物料名称', fixed: 'left', width: 150}
                ,{field: 'materialSkuCode',  title: '物料编码', fixed: 'left', width: 150}
                ,{field: 'oldSpecCode',  title: '规格码', fixed: 'left', width: 150}
                ,{field: 'brandName',  title: '品牌'}
                ,{field: 'supplierName',  title: '所属供应商'}
                ,{field: 'price',  title: '单价'}
                ,{field: 'unitName',  title: '包装单位'}
                ,{field: 'packName',  title: '包装方案'}
                ,{field: 'quantity',  title: '总需求数(基础单位数)', width: 150}
                ,{field: 'stockNumber',  title: '库存数(基础单位数)', width: 150}
                ,{field: 'total',  title: '总计金额'}
                ,{field: 'status',  title: '状态',/* templet:function (d) {
                    if (d.status == 0) {
                        return '<span>不缺货<span/>';
                    } else {
                        return '<span>缺货<span/>';
                    }
                }*/}
                ,{field: 'outTotal',  title: '缺货金额'}
                ,{field: 'time', sort: true, title: '截至时间', width: 120}
                ,{align: 'center', toolbar: '#unstartedMaterialsTableBar', title: '操作', fixed: 'right', width: 80}
            ]],
        });

        // 工具条点击事件
        table.on('tool(unstartedMaterialsTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') { //详情
                materialsDetail(data);
            }
        });

        //监听排序
        table.on('sort(unstartedMaterialsTable)', function(obj){
            table.reload('unstartedMaterialsTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
        });

        // 获取顶部数据
        materialsTopData();
        function materialsTopData() {
            admin.req('production/productionPlan/admin/unstartedMaterials/topData', {}, function (res) {
                if (res.code == 200) {
                    let row = res.data[0];
                    $("#num").text(row.num);
                    $("#total").text(row.total);
                    $("#supplier").text(row.supplier);
                    $("#outNum").text(row.outNum);
                    $("#outTotal").text(row.outTotal);
                    $("#outSupplier").text(row.outSupplier);
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'GET');
        }

        // 物料列表详情
        function materialsDetail(data) {
            admin.open({
                type: 1,
                area: ['1460px', '800px'],
                offset: '65px',
                title: '未开工物料统计详情',
                content: $('#materialsDetailTemplate').html(),
                success: function () {
                    table.render({
                        elem: '#unstartedMaterialsDetailTable',
                        data: [data],
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'pic', sort: true, title: '物料图片',templet:function (d) {
                                    if(d.pic){
                                        return '<img src="'+ d.pic +'" style="height: 80px;width: 80px;"/>';
                                    }
                                    return '<img src="assets/images/default-icon.png"/>';
                                }}
                            ,{field: 'skuName',title: '物料名称', width: 150}
                            ,{field: 'materialSkuCode',  title: '物料编码', width: 150}
                            ,{field: 'oldSpecCode',  title: '规格码', width: 150}
                            ,{field: 'brandName',  title: '品牌'}
                            ,{field: 'supplierName',  title: '所属供应商'}
                            ,{field: 'price',  title: '单价'}
                            ,{field: 'unitName',  title: '包装单位'}
                            ,{field: 'packName',  title: '包装方案'}
                            ,{field: 'quantity',  title: '总需求数(基础单位数)', width: 150}
                            ,{field: 'stockNumber',  title: '库存数(基础单位数)', width: 150}
                            ,{field: 'total',  title: '总计金额'}
                            ,{field: 'status',  title: '状态'}
                            ,{field: 'outTotal',  title: '缺货金额'}
                            ,{field: 'time', sort: true, title: '截至时间', width: 120}
                        ]],
                    });
                    // 工单表格
                    table.render({
                        elem: '#workOrderPlanTable',
                        url: config.base + 'production/productionPlan/admin/unstartedMaterials/listOrder?materialSkuCode=' + data.materialSkuCode + '&status=not',
                        page: true,
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'code',title: '工单编号'}
                            ,{field: 'skuCode',  title: '生产产品编号'}
                            ,{field: 'productionQuantity',  title: '生产数量'}
                            ,{field: 'deviceQuantity',  title: '生产设备数量'}
                            ,{field: 'creatorName',  title: '创建人'}
                            ,{field: 'createTime',  title: '创建时间'}
                            ,{field: 'statusDesc',  title: '状态'}
                            ,{align: 'center', toolbar: '#workOrderPlanTableBar', title: '操作', fixed: 'right', width: 80}
                        ]],
                    });

                    // 工具条点击事件
                    table.on('tool(workOrderPlanTable)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'detail') { //详情
                            showEditModel(data, 'details');
                        }
                    });
                }
            });
        }

        // 工单详情
        function showEditModel(data, _type) {
            admin.open({
                type: 1,
                area: ['1665px', '840px'],
                offset: '65px',
                title: '工单详情',
                content: $('#simpleWorkOrderForm').html(),
                success: function () {
                    let simpleWorkOrderData = [], activeSimpleWorkOrderData;
                    if (data) {
                        // 请求工序
                        admin.req('production/productionPlan/admin/simpleWorkOrder/getSimpleWorkOrderVODetails', {id: data.id},
                            res => {
                                if (res.code === 200) {
                                    simpleWorkOrderData = res.data.processVOList;
                                    showProcess(simpleWorkOrderData, _type);
                                } else {
                                    showProcess([], _type);
                                }
                            });

                        $('.simpleWorkOrderFormBoxHeader input').attr('readonly', 'true');
                        $('#workPlanCodeBox').show();

                        if (_type === 'details') {
                            $('.simpleWorkOrderFormMain .layui-btn').hide();
                            $('.simpleWorkOrderFormBox button[lay-filter="productionWorkPlanFormSubmit"]').remove();
                        } else {
                            //添加工序按钮
                            $('#processHeaderBtn').click(function () {
                                // 选择工序
                                chooseProcess();
                            });

                            // 添加设备
                            $('#equipmentHeaderBtn').click(function () {
                                if (!activeSimpleWorkOrderData) {
                                    layer.msg('请选择工序', {icon: 5});
                                } else {
                                    chooseDevice('');
                                }
                            });

                            // 添加物料
                            $('#materialHeaderBtn').click(function () {
                                if (!activeSimpleWorkOrderData) {
                                    layer.msg('请选择工序', {icon: 5});
                                } else {
                                    chooseMaterial()
                                }
                            });

                            // 工序作废
                            $('#processBoxList').delegate('li>.processBoxEdit', 'click', function (event) {
                                let _that = $(this);
                                event.stopPropagation();
                                layer.confirm('确定要作废吗？', {offset: '65px', skin: 'layui-layer-admin'}, function (i) {
                                    layer.close(i);
                                    layer.load(2);
                                    admin.req('production/productionPlan/admin/simpleWorkOrder/cancellationWorkOrderProcess', {id: _that.attr('id')}, function (res) {
                                        layer.closeAll('loading');
                                        if (res.code == 200) {
                                            let _acData = simpleWorkOrderData.find(item => item.id == _that.parent('li').attr('id'));
                                            simpleWorkOrderData.splice(simpleWorkOrderData.indexOf(_acData), 1);
                                            _that.parent('li').remove();
                                            if (_that.parent('li').hasClass('active')) {
                                                activeSimpleWorkOrderData = void 0; // 让当前选中的工序清空
                                                showEquipment([]); // 清空关联设备
                                                showMaterial([]); // 清空相关工序
                                            }
                                            layer.msg(res.msg, {icon: 1});
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    }, 'PUT');
                                });
                            });


                            // 表单提交事件
                            form.on('submit(productionWorkPlanFormSubmit)', function (d) {
                                /*if (simpleWorkOrderData.length === 0) {
                                    layer.msg('请添加工序', {icon: 5});
                                    return false;
                                }*/
                                d.field.processFormsList = simpleWorkOrderData;
                                admin.req('production/productionPlan/admin/simpleWorkOrder/updateWorkOrder', JSON.stringify(d.field), function (res) {
                                    layer.closeAll('loading');
                                    if (res.code == 200) {
                                        layer.msg(res.msg, {icon: 1});
                                        table.reload('simpleWorkOrderTable');
                                        layer.closeAll('page');
                                    } else {
                                        layer.msg(res.msg, {icon: 2});
                                    }
                                }, 'put', 'true', 'application/json; charset=utf-8');
                                return false;
                            });

                        }


                        form.val('simpleWorkOrderForm', data);

                    }

                    // 渲染工序
                    function showProcess(_data, processType) {
                        if (_data.length === 0) {
                            return false
                        } else {
                            layer.load(2);
                            let html = '';
                            _data.forEach((item, index) => {
                                if ((processType == 'details' && index == 0) || processType == 'edit' && index == 0) {
                                    html += `<li class="processBoxItem active" id="${item.processId}" type="${processType || ''}">
                                                <div class="processBoxName">${item.nodeNames}</div>
                                                 ${processType == "details" ? '' : (processType == "edit" ?
                                        '<div class="processBoxEdit" id="' + item.id + '"><a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">作废</a></div>' :
                                        '<div class="processBoxDel"><i class="layui-icon layui-icon-delete layui-font-18"></i></div>')}</li>`;


                                    activeSimpleWorkOrderData = item;
                                    admin.req('production/productionPlan/admin/simpleWorkOrder/getWorkOrderDeviceAndMaterial',
                                        {processId: item.processId, workOrderId: data.id}, res => {
                                            if (res.code === 200) {
                                                activeSimpleWorkOrderData.deviceList = res.data.deviceList;
                                                activeSimpleWorkOrderData.materialList = res.data.materialList;
                                                showEquipment(activeSimpleWorkOrderData.deviceList);
                                                showMaterial(activeSimpleWorkOrderData.materialList);
                                            } else {
                                                showEquipment([]);
                                                showMaterial([])
                                            }
                                        })

                                } else {
                                    html += `<li class="processBoxItem" id="${item.processId}" type="${processType || ''}">
                                                <div class="processBoxName">${item.nodeNames}</div>
                                                ${processType == "details" ? '' : (processType == "edit" ?
                                        '<div class="processBoxEdit" id="' + item.id + '"><a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">作废</a></div>' :
                                        '<div class="processBoxDel"><i class="layui-icon layui-icon-delete layui-font-18"></i></div>')}</li>`
                                }
                            });
                            layer.closeAll('loading');
                            $('#processBoxList').append(html);

                        }
                    }

                    // 工序点击事件
                    $('#processBoxList').delegate('li', 'click', function () {
                        $(this).addClass('active').siblings().removeClass('active');
                        let _processId = $(this).attr('id');
                        activeSimpleWorkOrderData = simpleWorkOrderData[$(this).index()];
                        if ($(this).attr('type') == 'details' || $(this).attr('type') == 'edit') {
                            layer.load(2);
                            admin.req('production/productionPlan/admin/simpleWorkOrder/getWorkOrderDeviceAndMaterial',
                                {processId: _processId, workOrderId: data.id}, res => {
                                    layer.closeAll('loading');
                                    if (res.code === 200) {
                                        let deviceListData = res.data.deviceList.length >= activeSimpleWorkOrderData.deviceList.length ? res.data.deviceList : activeSimpleWorkOrderData.deviceList,
                                            materialListData = res.data.materialList.length >= activeSimpleWorkOrderData.materialList.length ? res.data.materialList : activeSimpleWorkOrderData.materialList;
                                        activeSimpleWorkOrderData.deviceList = deviceListData;
                                        activeSimpleWorkOrderData.materialList = materialListData;
                                        showEquipment(activeSimpleWorkOrderData.deviceList);
                                        showMaterial(activeSimpleWorkOrderData.materialList);
                                    } else {
                                        showEquipment([]);
                                        showMaterial([])
                                    }
                                })
                        } else {
                            showEquipment(activeSimpleWorkOrderData.deviceList);
                            showMaterial(activeSimpleWorkOrderData.materialList);
                        }
                    });

                    // 渲染设备
                    function showEquipment(_data) {
                        // 渲染设备table
                        table.render({
                            elem: '#equipmentTable',
                            page: false,
                            data: _data,
                            limit: Number.MAX_VALUE,
                            cellMinWidth: 100,
                            cols: [[
                                {type: 'numbers', title: '序号', width: 60}
                                , {field: 'deviceCode', title: '设备编号'}
                                , {field: 'deviceModel', title: '设备类型'}
                                , {field: 'deviceName', title: '设备名称'}
                                , {
                                    field: 'productionQuantity', title: '计划生产数量', width: 120, templet: function (d) {
                                        return '<input class="layui-input productionQuantity" placeholder="非必填" style="height: 28px;" type="text" ' +
                                            'value="' + d.productionQuantity + '" onkeyup="this.value=this.value.replace(/^0(0+|\\d+)|[^\\d]+/g,\'\')"/>'
                                    }
                                },
                                data ? (_type === 'details' ? '' : {
                                    templet: d =>
                                        d.isLocal ? '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' :
                                            '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancel">作废</a>'
                                    , title: '操作', width: 50
                                }) : ({toolbar: '#simpleWorkOrderFormTableBar', title: '操作', width: 50})
                            ]],
                            done: function (res, curr, count) {
                                if (data && _type === 'details') {
                                    $('.productionQuantity').attr('readonly', "readonly")
                                }
                            }
                        });

                        // 修改设备计划生产数量
                        $("body").delegate("[lay-id='equipmentTable'] input.productionQuantity", "change", function () {
                            if (activeSimpleWorkOrderData.deviceList[$(this).parents('tr').index()]) {
                                activeSimpleWorkOrderData.deviceList[$(this).parents('tr').index()].productionQuantity = $(this).val().trim();
                            }
                        });

                        // 设备
                        table.on('tool(equipmentTable)', function (obj) {
                            if (obj.event === 'del') { //删除
                                activeSimpleWorkOrderData.deviceList.splice(obj.tr.index(), 1);
                                obj.del();
                            } else if (obj.event === 'cancel') { // 作废
                                layer.confirm('确定要作废吗？', {offset: '65px', skin: 'layui-layer-admin'}, function (i) {
                                    layer.close(i);
                                    layer.load(2);
                                    admin.req('production/productionPlan/admin/simpleWorkOrder/cancellationWorkOrderDevice', {id: obj.data.id}, function (res) {
                                        layer.closeAll('loading');
                                        if (res.code == 200) {
                                            layer.msg(res.msg, {icon: 1});
                                            activeSimpleWorkOrderData.deviceList.splice(obj.tr.index(), 1);
                                            obj.del();
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    }, 'PUT');
                                });
                            }
                        });
                    }

                    // 渲染物料
                    function showMaterial(_data) {
                        // 渲染设备table
                        table.render({
                            elem: '#materialTable',
                            page: false,
                            data: _data,
                            limit: Number.MAX_VALUE,
                            cellMinWidth: 100,
                            cols: [[
                                {type: 'numbers', title: '序号', width: 40}
                                , {
                                    field: 'productPic',
                                    title: '物料图片',
                                    width: 80,
                                    templet:function (d) {
                                        if(d.productPic){
                                            return '<img src="'+ d.productPic +'" style="cursor: pointer"/>';
                                        }
                                        return '<img src="assets/images/default-icon.png" style="cursor: pointer"/>';
                                    }
                                }
                                , {field: 'defaultSkuName', title: '物料名称', width: 90,}
                                , {field: 'defaultMaterialSkuCode', title: '物料编号'}
                                , {field: 'oldSpecCode', title: '物料规格码', width: 120,}
                                , {
                                    field: 'quantity', title: '预计所需数量(基础单位数)', width: 120, templet: function (d) {
                                        return '<input class="layui-input productionQuantity" lay-verify="number" style="height: 28px;" type="text" ' +
                                            'value="' + d.quantity + '" onkeyup="this.value=this.value.replace(/^0(0+|\\d+)|[^\\d]+/g,\'\')"/>'
                                    }
                                },
                                // data ? '' : { align: 'center',title: '操作', width: 60, templet: d => d.isDel ? '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' : "" }
                                data ? (_type === 'details' ? '' : {
                                        templet: d =>
                                            d.isLocal ? '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' :
                                                '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancel">作废</a>'
                                        , title: '操作', width: 50
                                    }) :
                                    ({toolbar: '#simpleWorkOrderFormTableBar', title: '操作', width: 50})
                            ]],
                            done: function (res, curr, count) {
                                if (data && _type === 'details') {
                                    $('.productionQuantity').attr('readonly', "readonly")
                                }
                            }
                        });

                        // 修改设备计划生产数量
                        $("body").delegate("[lay-id='materialTable'] input.productionQuantity", "change", function () {
                            if (activeSimpleWorkOrderData.materialList[$(this).parents('tr').index()]) {
                                activeSimpleWorkOrderData.materialList[$(this).parents('tr').index()].quantity = $(this).val().trim();
                            }
                        });

                        // 设备删除
                        table.on('tool(materialTable)', function (obj) {
                            let data = obj.data;
                            if (obj.event === 'del') { //删除
                                activeSimpleWorkOrderData.materialList.splice(obj.tr.index(), 1);
                                obj.del();
                            } else if (obj.event === 'cancel') { // 作废
                                layer.confirm('确定要作废吗？', {offset: '65px', skin: 'layui-layer-admin'}, function (i) {
                                    layer.close(i);
                                    layer.load(2);
                                    admin.req('production/productionPlan/admin/simpleWorkOrder/cancellationWorkOrderMaterial', {id: obj.data.id}, function (res) {
                                        layer.closeAll('loading');
                                        if (res.code == 200) {
                                            layer.msg(res.msg, {icon: 1});
                                            activeSimpleWorkOrderData.materialList.splice(obj.tr.index(), 1);
                                            obj.del();
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    }, 'PUT');
                                });
                            }
                        });
                    }

                }
            });
        }
        // 导出
        $('#unstartedMaterialsExport').click(function () {
            location.href = config.base + 'production/productionPlan/admin/unstartedMaterials/export';
        });
    });
</script>